<template>
<div class="Login">
  <div class="logo">
    <span>LOGO</span>
  </div>
  <div class="loginForm">
    <van-icon name="phone-o" />
    <input class="loginTele" v-model="tele" placeholder="请输入手机号码">
  </div>
  <div class="Yz loginForm">
    <div class="loginYz">
      <van-icon name="closed-eye" />
      <input class="YzTele" type="password" v-model="password" placeholder="请输入密码">
    </div>

  </div>
  <div class="loginForm Invition" v-if="Invition_show">
    <van-icon name="orders-o" />
    <input class="loginTele" v-model="Invition" placeholder="请输入邀请码(选填)">
  </div>
  <div class="loginTo" @click="login">登录</div>
  <router-link class="registeredTo" to="/registered">
    <p>还没有账号?去注册</p>
  </router-link>
</div>
</template>


<script>
import axios from 'axios';
import BaseUrl from "../static/common.js"

import {
  Toast
} from 'vant';

export default {
  data() {
    return {
      Yzm: "",
      tele: "",
      count: "",
      show: true,
      user: "",
      Invition: "",
      Invition_show: false,
      password: ""
    }
  },
  methods: {
    telLogin: function() {
      var that = this
      var phone = this.tele
      console.log(1);

      if (/^1[34578]\d{9}$/.test(phone) && that.count == "") {
        // alert("用户名不存在")
        // return false;
        const TIME_COUNT = 60;
        that.show = !that.show;
        that.count = TIME_COUNT;
        that.show = false;
        that.timer = setInterval(() => {
          if (that.count > 0 && that.count <= TIME_COUNT) {
            that.count--;
          } else {
            that.show = true;
            clearInterval(that.timer);
            that.timer = null;
          }
        }, 1000);
        axios({
          method: "POST",
          url: "http://zhaochuanwei.top/admin.php/api/login/sendSMS",
          params: {
            phone: this.tele
          }
        }).then(function(data) {
          console.log(data);
          console.log(data.data.status)
          if (data.data.status == 1) {
            that.Invition_show = true
          } else {
            that.Invition_show = false
          }
        });
      } else {
        alert("手机号码有误,请重填");
        return false;
      };
    },
    login: function() {
      console.log("1111111111111");
      var that = this
      console.log(that.Yzm)
      console.log(that.tele)
      axios({
        method: "POST",
        url:  BaseUrl.baseUrl+"/login/is_login",
        params: {
          phone: this.tele,
          password: this.password
        }

      }).then(function(data) {
        console.log(data);
        // //登陆成功
        // session.setAttribute("user", obj);
        // //拦截器中增加，获取session代码
        // HttpSession session =request.getSession();
        // System.out.println("拦截器中的session的id是====" + session.getId());
        // Object obj = session.getAttribute("user");
        sessionStorage.setItem('key', JSON.stringify(data.data.data));
        var data1 = sessionStorage.getItem('key');
        console.log(data1);
        if (data.data.code != 0) {
          that.$router.push({
            path: 'Home'
          });
        } else {
          Toast.fail(data.data.msg);
        }
      });
    }

  },
  mounted() {

  }
};
</script>


<style >
.Login {
  height: 100vh;
  background: url(../assets/login.png) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
  z-index: -111;
  padding-top: 2.346667rem;

}

.logo {
  width: 3.16rem;
  height: 3.16rem;
  background: rgba(255, 255, 255, 0.37);
  /* opacity:0.37; */
  border-radius: 50%;
  line-height: 3.16rem;
  text-align: center;

  margin: 0 auto;

}

.logo>span {
  font-size: 0.9067rem;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #fff;
}

.loginForm {
  width: 6.9333rem;
  height: 1.0667rem;
  line-height: 1.06rem;
  background: rgba(0, 0, 0, 0.34);
  /* opacity:0.34; */
  margin: 0 auto;
  margin-top: 1.666667rem;
  box-sizing: border-box;
  border-radius: .13rem;
  border: 1px solid #30B167;
}

.loginForm>.van-icon-phone-o {
  color: #fff;
  font-size: .8rem;
  margin-left: .13rem;
}

.loginYz>.van-icon-closed-eye {
  color: #fff;
  font-size: .8rem;
  margin-left: .13rem;

}

.Yz {
  width: 6.9333rem;
  height: 1.0667rem;
  margin: 0.5467rem auto;

  box-sizing: border-box;
}

.loginYz>.van-icon-sign {
  color: #fff;
}

.loginForm>.loginTele {
  width: 5.7333rem;
  height: 1.0667rem;
  border: 0;
  /* border-left: 1px solid #fff; */
  float: right;
  background: rgba(0, 0, 0, 0.01);
  /* opacity:0.34; */
  color: #fff;
  font-size: 0.48rem;
}

.Invition {
  margin-top: 0;
  margin-bottom: 1.5rem
}

.Invition>.van-icon-orders-o {
  color: #fff
}

.loginYz {
  width: 100%;
  height: 1.0667rem;
  background: rgba(0, 0, 0, 0.34);
  float: left;
}

.loginYz>.YzTele {
  width: 5.73rem;
  height: 1.0667rem;
  border: 0;
  /* border-left: 1px solid #fff; */
  float: right;
  background: rgba(0, 0, 0, 0.01);
  /* opacity:0.34; */
  color: #fff;
  font-size: 0.48rem;
}

.Yz>.YzM {
  width: 2.5333rem;
  height: 1.0667rem;
  font-size: 0.32rem;
  float: left;
  background: rgba(48, 177, 103, 1);
  border-radius: 0.08rem;
  line-height: 1.0667rem;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.Login .loginTo {
  width: 6.933333rem;
  height: 1.0667rem;
  background: rgba(48, 177, 103, 1);
  box-shadow: 0rem 0.1067rem 0.2133rem 0rem rgba(23, 22, 17, 0.41);
  border-radius: 0.1333rem;
  font-size: 0.5067rem;
  line-height: 1.066667rem;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: .53rem auto;
  z-index: 999
}

.Login .registeredTo {
  width: 100%;
  font-size: .32rem;
  text-align: center;
  color: #fff;
}

.Login .registeredTo p {
  text-decoration: underline;
  cursor: pointer;
}
</style>
